<template>
  <div class="hello">
    <div class="tab">
      <router-link tag="div" class="tab-item" to="/pxtabs">
        <span class="tab-link">pxtabs</span>
      </router-link>
      <router-link tag="div" class="tab-item" to="/pxbar">
        <span class="tab-link">pxbar</span>
      </router-link>
      <router-link tag="div" class="tab-item" to="/pxpie">
        <span class="tab-link">pxpie</span>
      </router-link>
      <router-link tag="div" class="tab-item" to="/pxline">
        <span class="tab-link">pxline</span>
      </router-link>
      <router-link tag="div" class="tab-item" to="/flexh">
        <span class="tab-link">flexh</span>
      </router-link>
      <router-link tag="div" class="tab-item" to="/flexv">
        <span class="tab-link">flexv</span>
      </router-link>
      <router-link tag="div" class="tab-item" to="/music">
        <span class="tab-link">music</span>
      </router-link>
      <router-link tag="div" class="tab-item" to="/scoped">
        <span class="tab-link">scoped</span>
      </router-link>
      <router-link tag="div" class="tab-item" to="/html2canvas">
        <span class="tab-link">html2canvas</span>
      </router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="stylus">
.tab
  background: #222
  display: flex
  height: 44px
  line-height: 44px
  font-size: 14px
  .tab-item
    flex: 1
    text-align: center
    .tab-link
      padding-bottom: 5px
      color: #ccc
    &.router-link-active
      .tab-link
        color: #ffcd32
        border-bottom: 2px solid #ffcd32
</style>
